<template>
    <el-form ref="dataForm" :model="form" label-width="80px" :rules="dataRule" @keyup.enter.native="onSubmit()">
        <el-form-item label="收件人" prop="email">
            <el-select v-model="form.email" style="width:100%" multiple filterable allow-create default-first-option
                placeholder="请选择收件人">
                <el-option v-for="item in options" :key="item.value" :label="item.email" :value="item.email">
                    <span style="float: left">{{item.orgName}}-{{ item.username }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.email }}</span>
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="主题" prop="subject">
            <el-input v-model="form.subject" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="邮件类型" prop="type">
            <el-radio-group v-model="form.type">
                <el-radio label="1">普通邮件</el-radio>
                <el-radio label="2">富文本邮件</el-radio>
                <el-radio label="3">模板邮件</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="模板" prop="template" v-if="form.type == '3'">
            <el-select v-model="form.template" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="邮件内容" prop="content">
            <el-input type="textarea" v-model="form.content" show-word-limit :autosize="{ minRows: 15, maxRows: 100}">
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即发送</el-button>
            <el-button @click="clearForm">清空</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import * as emailInfoService from '@/api/chat/emailinfo'
    import * as UserService from '@/api/upms/user'
    export default {
        data() {
            return {
                form: {
                    subject: '',
                    type: '1',
                    content: '',
                    template: '',
                    email: []
                },
                dataRule: {
                    subject: [{
                        required: true,
                        message: '主体不能为空',
                        trigger: 'change'
                    }],
                    type: [{
                        required: true,
                        message: '类型不能为空',
                        trigger: 'blur'
                    }],
                    content: [{
                        required: true,
                        message: '内容不能为空',
                        trigger: 'blur'
                    }],
                    email: [{
                        required: true,
                        message: '收件人不能为空',
                        trigger: 'blur'
                    }]
                },
                options: []
            }
        },
        created() {
            this.getUser()
        },
        methods: {
            getUser() {
                UserService.getsameorguser().then(res => {
                    this.options = res
                })
            },
            onSubmit() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        this.$confirm("确认发送？", "确认信息", {
                            distinguishCancelAndClose: true,
                            confirmButtonText: "确定",
                            cancelButtonText: "取消"
                        }).then(() => {
                            emailInfoService.sendEmail(this.form).then(res => {
                                this.$message.success("发送成功！")
                                this.$refs['dataForm'].resetFields()
                            });
                        });
                    }
                })
            },
            clearForm(){
                this.$refs['dataForm'].resetFields()
            }
        }
    }
</script>
<style>
    .el-tag+.el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .box {
        display: block;
        resize: vertical;
        padding: 5px 15px;
        line-height: 1.5;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
    }
</style>